<template>
  <page-wrap :show-top="showTop" back :title="'搜索'" bg-color="transparent" hideTab>
    <view :style="'padding-top:' + navHeight + 'px;'">
      <view class="navBarContainer" type="line">
        <view class="box-bg">
          <uni-nav-bar class="uni_nav_bar">
            <view class="input-view">
              <u-input placeholder="通过关键词搜索职业报告" @focus="isSearched = false" v-model="keyword" shape="circle" border="surround" clearable class="topSearch" :class="keyword?'':'left_icon'">
              </u-input>
              <view class="searchIconContainer" v-if="!keyword ">
                <image :src="searchIcon" class="searchIcon"></image>
              </view>
            </view>
            <block slot="right" v-if="true">
              <u-button :plain="true" @click="handleSearchClick" class="rightButton">搜索</u-button>
            </block>
          </uni-nav-bar>
        </view>
      </view>
      <view class="beforeSearch" v-show="!isSearched">
        <view class="searchHistoryContainer" v-if="searchHistory&&searchHistory.length">
          <view class="historyTitle">
            <text class="left">搜索历史</text>
            <view class="right">
              <u-button :plain="true" @click="handleDeleteClick" class="deleteButton">
                <image :src="deleteIcon" class="deleteIcon"></image>
              </u-button>
            </view>
          </view>
          <view class="historyButtons">
            <view :class="{'leftArea':true,'open':isOpen}">
              <u-tag v-for="(item,index) in searchHistory" @click="handleTagClick(item.text)" :text="item.text" :key="index" bgColor="#EEF1F7" shape="circle" class="historyTags"></u-tag>
            </view>
            <view class="rightArea">
              <u-tag bgColor="#EEF1F7" text="  " shape="circle" @click="handleOpenClick" v-show="searchHistory.length>3" :class="isOpen?'moreHistoryup':'moreHistorydown'" class="historyTags  " />
            </view>
          </view>
        </view>
        <view class="recommendSearchContainer">
          <view class="recommendTitle">
            <view class="left">推荐搜索</view>
          </view>
          <view class="recommendList">
            <view class="recommendItem" v-for="(item,index) in hotWordList" :key="index" @click="handleTagClick(item.searchWordName)">
              <text class="itemText"> {{item.searchWordName}} </text>
              <image :src="fireImg" class="fireIcon" v-if="index<=1"></image>
            </view>
          </view>
        </view>
      </view>
      <view class="afterSearch" v-show="isSearched">
        <view class="searchList" ref="_list" v-if="report_list.length > 0">
          <scroll-view ref="list" scroll-y @scrolltolower="loadMore">
            <reportItem v-for="item in report_list" :isPreview="true" :key="item.mpaActivityId" :reportItem="item" />
            
            <u-loadmore v-if="reportList.length || !loaded" class="list-more" :status="moreLoading" :load-text="loadText" />
            <Empty v-if="loadEnd && !reportList.length" :baseImg="emptyImg" text="暂无列表~" :fontWeight="400" />
          </scroll-view>
        </view>
        <view class="empty" v-else>
          <image :src="emptyImg" class="emptyImg"></image>
          <text class="emptyText">没有找到匹配结果</text>
          <text class="emptyText2">建议您修改关键词重新搜索</text>
        </view>
      </view>

      <u-loading-page :loading="loading"></u-loading-page>
    </view>
  </page-wrap>
</template>

<script>
import {
  reqGetHotWord,
  reqGetIndexReportList,
  // reqClickReport,
} from "@/api/modules/report";
import reportItem from "@/components/reportItem/index";
import Empty from "@/components/Empty.vue";
export default {
  components: { reportItem, Empty },
  data() {
    return {
      navHeight: 0,
      placeLeft: "106rpx",
      isShowIcon: true,
      hotWordList: [],
      emptyImg: "https://upload.yl1001.com/upload/images/view?file=GDe_d9=SLdFymXFSOYlCXA83x-PTFQR1C_NYMN/dLY,4MdVhX_01B/B5qxvuZ.png",
      isOpen: false,
      isSearched: false,
      loading: false,
      fireImg: "https://upload.yl1001.com/upload/images/view?file=4RK8jjX7jD03buY9e3d11KY/I76B2EARgqMs0oAFJmi4aN9oeeMEdNMr59Xq4.png",
      searchHistory: [],
      report_list: [],
      keyword: "",
      option: { auto: true, page: 0 },
      page: 0,
      size: 15,
      flag: true,
      deleteIcon: "https://upload.yl1001.com/upload/images/view?file=zYzuaqL3X3F0o27QF9nFOsXHmnEE85WSZ7T0B5aSXvzIn=QB_po9LULJO=pnP.png",
      searchIcon:
        "https://upload.yl1001.com/upload/images/view?file=JKhreKcuclmh,jeWiRdxLxbv2NDC1wk1hEY/PGP30MAVfX423dGk98HliYtr_.png",
      loadText: {
        loadmore: "加载更多",
        loading: "加载中",
        nomore: "已经到底啦",
      },
      pageParams: {
        pageNo: 0,
        pageSize: 20,
      },
      loaded: false,
    };
  },
  computed: {
    personId() {
      return uni.getStorageSync("person-id").slice(2) || undefined;
    },
  },
  created() {
    this.navHeight = getApp().globalData.navHeight;
    this.searchHistory = uni.getStorageSync("searchHistory") && JSON.parse(uni.getStorageSync("searchHistory")) || [];
  },
  mounted() {
    this.getHotWord();
    this.getData();
  },
  methods: {
    getHotWord() {
      this.loading = true;
      const params = {
        moduleType: "OCCUPATION_MODULE_TYPE",
        pageNo: 1,
        pageSize: 100,
      };
      reqGetHotWord(params, this.personId)
        .then((res) => {
          this.hotWordList = res.data;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    saveHistory(keyword) {
      let index = this.searchHistory.findIndex(item => item.text == keyword);
      if (index > -1) {
        this.searchHistory.splice(index, 1);
      }
      this.searchHistory.unshift({ text: keyword });
      let history = JSON.parse(uni.getStorageSync("searchHistory") || "[]");
      history.unshift({ text: keyword });
      history = this.unique(history);
      uni.setStorageSync("searchHistory", JSON.stringify(history));
    },
    // 对搜索历史去重
    unique(arr) {
      let newArr = [];
      arr.forEach((i, v) => {
        let flag = true;
        newArr.forEach(item => {
          if (i.text == item.text)
            flag = false;
        })
        flag ? newArr.push(i) : newArr;
      })
      return newArr
    },
    handleSearchClick() {
      if (this.keyword) {
        this.saveHistory(this.keyword);
        this.isSearched = true;
        this.refresh({ page: this.page, size: this.size });
      }
    },
    handleOpenClick() {
      if (this.searchHistory.length < 4) {
        return;
      }
      this.isOpen = !this.isOpen;
    },
    handleDeleteClick() {
      this.searchHistory = [];
      uni.removeStorageSync("searchHistory");
    },
    handleTagClick(keyword) {
      this.keyword = keyword;
      this.isSearched = true;
      this.refresh({ page: this.page, size: this.size });
    },
    refresh(paging) {
      const params = {
        pageNo: 0,
        pageSize: paging.size || this.size,
        moduleType: "OCCUPATION_MODULE_TYPE",
        searchKeyword: this.keyword,
        personId: this.personId,
      };
      reqGetIndexReportList(params, this.personId)
        .then((res) => {
          this.page = res.pageparam.page;
          this.size = res.pageparam.page_size;
          this.report_list = res.data;
          this.$nextTick(() => {
            this.$refs.list && this.$refs.list.refreshSuccess({
              list: this.report_list,
              total: res.pageparam.sums,
            });
            // if (this.flag) {
            //   this.refresh({ page: this.page, size: this.size });
            //   this.flag = false;
            // }
          })
        })
        .catch((e) => {
          this.$refs.list.refreshFail();
        });
    },
    loadMore() {
      this.getData(true);
    },
    getData(isMore) {
      if (this.moreLoading == "loading" || this.moreLoading == "nomore") return;
      const params = {
        pageNo: this.pageParams.pageNo,
        pageSize: this.pageParams.pageSize,
        moduleType: "OCCUPATION_MODULE_TYPE",
        searchKeyword: this.keyword,
        personId: this.personId,
      };
      this.moreLoading = "loading";
      reqGetIndexReportList(params, this.personId)
        .then((res) => {
          this.moreLoading = "loadmore";
          this.loaded = true;
          if (res && res.code == 200) {
            if (isMore) {
              this.report_list.push(...res.data);
            } else {
              this.report_list = res.data;
            }
            this.pageParams.pageNo++;
            if (this.pageParams.pageNo > res.pageparam.pages) {
              this.moreLoading = "nomore";
            }
          } else {
            this.moreLoading = "nomore";
            uni.showToast({
              title: res.status_desc,
              icon: "none",
            });
          }
        })
        .catch((e) => {
          this.moreLoading = "nomore";
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.navBarContainer {
  width: 100%;
  height: 108rpx;
  .uni_nav_bar {
    display: flex;
    justify-content: center;
    width: 100%;
    padding-bottom: 18rpx;
    background-color: #f4f6f8;
    position: sticky;
    top: 0;
    z-index: 1;
    .input-view {
      width: 686rpx;
      height: 76rpx;
      position: relative;
      margin-top: 24rpx;
      margin-left: 32rpx;
      z-index: 99;
      .topSearch {
        border: none;
        ::v-deep.u-input--border {
          border-radius: 76rpx;
          background: #ffffff;
          border: none;
        }
      }
    }
    .searchIconContainer {
      display: flex;
      align-items: center;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 32rpx;
      .searchIcon {
        width: 40rpx;
        height: 40rpx;
        margin-right: 16rpx;
      }
      &:after {
        content: " ";
        width: 1px;
        height: 13px;
        background: #d8d8d8;
        border-radius: 1px;
      }
    }
    .rightButton {
      padding-left: 2rpx !important;
      margin-top: 24rpx !important;
    }
  }
}

::v-deep .u-hairline-border::after {
  border: none !important;
}
::v-deep .u-btn--default {
  border: none;
  background-color: transparent !important;
}
::v-deep .rightButton .u-size-default {
  font-size: 28rpx !important;
  height: 76rpx !important;
  width: 112rpx !important;
}
::v-deep .u-size-default{
  font-size: 28rpx !important;
}
::v-deep .u-input__input {
  font-size: 26rpx;
  color: #bfbfbf;
}
::v-deep .left_icon .u-input__input {
  padding-left: 106rpx;
}
::v-deep .rightButton .u-default-plain-hover {
  background: transparent !important;
}
.beforeSearch {
  .searchHistoryContainer {
    margin-top: 30rpx;
    padding: 0 32rpx;
    .historyTitle {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 56rpx;
      margin-bottom: 29rpx;
      .left {
        width: 128rpx;
        height: 56rpx;
        font-size: 32rpx;
        font-family: PingFang-SC-Bold, PingFang-SC;
        font-weight: bold;
        color: #222222;
        line-height: 54rpx;
      }

      .right {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 60rpx;
        .deleteButton {
          margin-right: 10rpx;
        }
        .deleteIcon {
          width: 40rpx;
          height: 40rpx;
        }
      }
    }

    .historyButtons {
      display: flex;
      justify-content: space-between;
      .leftArea {
        display: inline-flex;
        flex-wrap: wrap;
        align-content: flex-start;
        max-height: 180rpx;
        overflow: hidden;
      }
      .rightArea {
        display: inline-flex;
        flex-direction: column;
        justify-content: flex-end;
      }
      .open {
        height: 360rpx;
        max-height: 360rpx !important;
      }
      .historyTags {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        background: #eef1f7;
        border-radius: 64rpx;
        max-width: 350rpx;
        height: 64rpx;
        margin: 12rpx 0rpx;
        margin-right: 24rpx;
        ::v-deep .u-mode-light-primary {
          align-items: center;
          justify-content: center;
          border: none;
          background: #eef1f7;
          max-width: 286rpx;
          overflow: hidden;
          word-break: break-all;
          white-space: nowrap;
          text-overflow: ellipsis;
          color: #222222;
        }
        ::v-deep .u-tag__icon {
          color: #bac3d5;
          margin: 0;
          span {
            color: #bac3d5;
          }
        }
      }
      .moreHistoryup,
      .moreHistorydown {
        position: relative;
        width: 64rpx;
      }
      .moreHistoryup::after {
        content: " ";
        display: block;
        width: 18rpx;
        height: 18rpx;
        border-top: 1px solid #bac3d5;
        border-left: 1px solid #bac3d5;
        position: absolute;
        top: 28rpx;
        transform: rotate(45deg);
      }
      .moreHistorydown::after {
        content: " ";
        display: block;
        width: 18rpx;
        height: 18rpx;
        border-top: 1px solid #bac3d5;
        border-left: 1px solid #bac3d5;
        position: absolute;
        top: 18rpx;
        transform: rotate(-135deg);
      }
    }
  }
  .recommendSearchContainer {
    margin-top: 30rpx;
    padding: 0 32rpx;
    .recommendTitle {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 56rpx;
      margin-bottom: 40rpx;
      .left {
        width: 128rpx;
        height: 56rpx;
        font-size: 32rpx;
        font-family: PingFang-SC-Bold, PingFang-SC;
        font-weight: bold;
        color: #222222;
        line-height: 54rpx;
      }
    }
    .recommendList {
      display: flex;
      justify-content: space-between;
      align-content: space-between;
      flex-wrap: wrap;
      height: 148px;
      background: #ffffff;
      border-radius: 12px;
      padding: 32rpx;
      .recommendItem {
        display: flex;
        align-items: center;
        width: 278rpx;
        height: 20px;
        .itemText {
          display: inline-block;
          height: 20px;
          font-size: 28rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #222222;
          line-height: 20px;
          margin-right: 12rpx;
          max-width: 360rpx;
          overflow: hidden;
          word-break: break-all;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .fireIcon {
          width: 20rpx;
          height: 20rpx;
        }
        ::v-deep .u-icon--right {
          height: 20px;
        }
      }
    }
  }
}
.afterSearch {
  .empty {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 142px auto 0;
    .emptyImg {
      width: 200px;
      height: 200px;
    }
    .emptyText {
      //  width: 104px;
      height: 18px;
      font-size: 13px;
      font-family: PingFang-SC-Bold, PingFang-SC;
      font-weight: bold;
      color: #888888;
      line-height: 18px;
      margin-bottom: 8px;
    }
    .emptyText2 {
      //  width: 170px;
      height: 20px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 20px;
    }
  }
  .searchList {
    padding: 16px 16px 0;
  }
}
</style>

